<template>
	<div class="loading-container">
		<div class="loading-wrapper">
			<slot></slot>
			<view class="load-icon" :style="{backgroundColor:modelValue?backgroundColor:''}">
				<up-transition :show="modelValue" :style="{width:'100%',height:'100%',display: 'flex',
				alignItems: 'center',justifyContent: 'center'}">
					<up-loading-icon :color="color" :textColor="textColor" :mode="mode" :size="size"
						:textSize="textSize" :text="text" :duration="duration" :show="modelValue"></up-loading-icon>
				</up-transition>
			</view>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Loading-mask',
		props: {
			modelValue: {
				type: Boolean,
				default: false
			},
			backgroundColor: {
				type: String,
				default: 'rgba(0, 0, 0 ,0.4)'
			},
			expires: {
				type: Number,
				default: 0,
			},
			opacity: {
				type: Number,
				default: 0.5
			},
			color: {
				type: String,
				default: '#909399'
			},
			textColor: {
				type: String,
				default: '#909399'
			},
			mode: {
				type: String,
				default: 'circle'
			},
			size: {
				type: Number,
				default: 24
			},
			textSize: {
				type: Number,
				default: 15
			},
			text: {
				type: String,
				default: ''
			},
			duration: {
				type: Number,
				default: 1200
			}
		}
	}
</script>

<style scoped lang="scss">
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.load-icon {
			width: 100%;
			height: 100%;
			border-radius: 8px;
			position: absolute;
			top: 0%;
			left: 0%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>